<script setup lang="ts">
defineProps(['Menulist'])
</script>
<script lang="ts">
export default {
  name: 'Menu',
}
</script>

<template>
  <template v-for="item in Menulist" :key="item.path">
    <!--    没有子路由-->
    <template v-if="!item.children">
      <el-menu-item v-if="!item.meta.hidden" :index="item.path">
        <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon>
        <template #title>
          <span>{{ item.meta.title }}</span>
        </template>
      </el-menu-item>
    </template>

    <!--    //只有一个子路由-->
    <template v-if="item.children && item.children.length === 1">
      <el-menu-item v-if="!item.meta.hidden" :index="item.children[0].path">
        <el-icon>
          <component :is="item.children[0].meta.icon"></component>
        </el-icon>
        <template #title>
          <span>{{ item.children[0].meta.title }}</span>
        </template>
      </el-menu-item>
    </template>

    <!-- 有子路由不为一个-->
    <template v-if="item.children && item.children.length > 1">
      <el-sub-menu v-if="!item.meta.hidden" :index="item.path">
        <template #title>
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </template>
        <Menu :Menulist="item.children"></Menu>
      </el-sub-menu>
    </template>
  </template>
  <!--    <el-menu-item index="1">首页</el-menu-item>-->
  <!--    <el-menu-item index="2">数据大屏</el-menu-item>-->
  <!--    <el-sub-menu index="3" >-->
  <!--      <template #title>-->
  <!--        <span>权限管理</span>-->
  <!--      </template>-->
  <!--      <el-menu-item index="3-1">用户管理</el-menu-item>-->
  <!--      <el-menu-item index="3-2">角色管理</el-menu-item>-->
  <!--      <el-menu-item index="3-2">菜单管理</el-menu-item>-->
  <!--    </el-sub-menu>-->
</template>

<style scoped lang="scss"></style>
